import React, { Component } from 'react';
import Footer from './../../components/footer'
import './index.scss'
import Banner from './../../components/userBanner'
import { getLikeBanners } from './../../api'
import { NavLink } from 'react-router-dom'


class Com extends Component {
  constructor(props) {
    super(props)
    this.state = {
      bannerList: []
    }
  }

  componentDidMount() {
    getLikeBanners().then(res => {
      res = res.data.data.slideshow
      if (res.length) {
        this.setState({
          bannerList: res
        })
      }
    })
  }

  render() {
    const { bannerList } = this.state
    return (
      <div className="container">
        <div className="box">
          <div className="user_content">
            <header>
              <span style={{ marginLeft: '.125rem' }}><img src="/images/user/home_ information_ic.png" alt="" /></span>
              <span style={{ marginRight: '.125rem', float: 'right' }}><NavLink to="/users/set" ><img src="/images/user/shezhi.png" alt="" /></NavLink></span>
              <div className="user_info">
                <div className="touXiang">
                  <img src="/images/user/touxiang.png" alt="" />
                </div>
                <p>Angelina</p>
                <div className="category">
                  <div>
                    <p>获赞</p>
                    <p>88</p>
                  </div>
                  <div style={{ margin: '0 .75rem' }}>
                    <p>粉丝</p>
                    <p>111</p>
                  </div>
                  <div>
                    <p>关注</p>
                    <p>666</p>
                  </div>
                </div>
              </div>
            </header>

            <div className="my_order">
              <h4>我的订单</h4>
              <div className="category">
                <NavLink to="/users/order">
                  <div>
                    <img src="/images/user/dingdan.png" alt="" />
                    <p>全部订单</p>
                  </div>
                </NavLink>
                <NavLink to="/users">
                  <div>
                    <img src="/images/user/daifukuan.png" alt="" />
                    <p>待付款</p>
                  </div></NavLink>
                <NavLink to="/users">
                  <div>
                    <img src="/images/user/daichuxing.png" alt="" />
                    <p>待出行</p>
                  </div></NavLink>
                <NavLink to="/users">
                  <div>
                    <img src="/images/user/daidianping.png" alt="" />
                    <p>带点评</p>
                  </div></NavLink>
              </div>
            </div>

            <div className="my_tool">
              <h4>我的工具</h4>
              <div className="category">
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的收藏</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>浏览历史</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的点评</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>优惠券</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>联系客服</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的钱包</p>
                </div>
                <NavLink to="/users/group">
                  <div>
                    <img src="/images/user/shoucang.png" alt="" />
                    <p>超值拼团</p>
                  </div>
                </NavLink>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的结伴</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的足迹</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>我的相册</p>
                </div>
                <div>
                  <img src="/images/user/shoucang.png" alt="" />
                  <p>会员中心</p>
                </div>
                <div>   &nbsp;  </div>
              </div>
            </div>

            <div className="guess_like">
              <h4>猜你喜欢</h4>
              <Banner bannerList={bannerList}></Banner>
            </div>
          </div>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
